<template>
	<view class="order_item" @click="toOrderDetail">
		<view class="order_code">
			<view class="code">
				订单编号：
				<view class="value">{{ code }}</view>
				<image src="@/static/market/copy.png" mode="widthFix" @click="copyCode" />
				<view class="status" :class="[`status${status}`]">{{ order_status_text }}</view>
			</view>
		</view>

		<view class="order_nft">
			<image src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix"></image>
			<view class="order_info">
				<view class="name_price">
					<text>NFT名称</text>
					<text>￥365</text>
				</view>
				<view class="time name_price">
					<text>2025-02-12 10:08:25</text>
					<text v-if="status === ORDER_STATUS.PENDING && isHightest" class="highest">当前最高出价</text>
				</view>
			</view>
		</view>

		<view v-if="status === 5" class="locked">
			<view class="time_left"> 剩余时间：{{ leftHSM }} </view>
			<view class="opera cancel">取消购买</view>
			<view class="opera">立即付款</view>
		</view>

		<view v-else-if="status === ORDER_STATUS.SELL" class="sell">
			<view class="opera cancel">取消寄售</view>
		</view>

		<view v-else-if="status === ORDER_STATUS.SEARCH" class="search">
			<view class="time_left"> 剩余时间：{{ leftDay }}天 {{ leftHSM }} </view>
			<view class="opera cancel">取消求购</view>
		</view>

		<view v-else-if="status === ORDER_STATUS.PENDING" class="bid">
			<view class="time_left"> 剩余时间：{{ leftDay }}天 {{ leftHSM }} </view>

			<view v-if="showAllBid" class="opera all_bid" @click.stop="toAllBid">所有出价</view>
			<view class="opera" :class="{ single: !showAllBid }">接受出价</view>
		</view>
	</view>
</template>
<script>
const ORDER_STATUS = {
	NORMAL: 0,
	FINISH: 1,
	CANCEL: 2,
	REFUNDING: 3,
	REFUNDED: 4,
	LOCKED: 5,
	SELL: 6,
	SEARCH: 7,
	PENDING: 8,
	PAID: 9,
	TRANSFER: 10,
};

const ORDER_STATUS_DESC = {
	0: "",
	1: "订单完成",
	2: "已取消",
	3: "退款中",
	4: "退款完成",
	5: "锁定中",
	6: "寄售中",
	7: "求购中",
	8: "待接受",
	9: "已支付",
	10: {
		0: "转入中",
		1: "转出中",
	},
};

export default {
	props: {
		order: {
			type: Object,
			default() {
				return {};
			},
		},

		showAllBid: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			code: "64hy65z41h35s5a1564hy65z41h35s5a1564",
			timeLeft: 0,
			ORDER_STATUS,
		};
	},

	computed: {
		status() {
			return Number(this.order.status);
		},

		isOwner() {
			return this.order.isOwner;
		},

		isHightest() {
			return this.order.hightest;
		},

		order_status_text() {
			const value = ORDER_STATUS_DESC[this.status];
			if (typeof value === "object") {
				return value[+this.isOwner];
			}
			return value;
		},

		leftDay() {
			return Math.floor(this.timeLeft / (24 * 60 * 60));
		},

		leftHSM() {
			const seconds = Math.floor(this.timeLeft - this.leftDay * 24 * 60 * 60);
			if (seconds <= 0) return "00:00:00";

			const hours = Math.floor(seconds / 3600);
			const minutes = Math.floor((seconds % 3600) / 60);
			const secs = seconds % 60;

			return String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0") + ":" + String(secs).padStart(2, "0");
		},
	},

	watch: {
		status: {
			handler() {
				if (this.timeLeft) return;

				if (this.status === ORDER_STATUS.LOCKED) {
					this.timeLeft = 10 * 60;
					// this.timeLeftInterval = setInterval(() => {
					// 	if (this.timeLeft > 0) {
					// 		this.timeLeft--;
					// 	} else {
					// 		clearInterval(this.timeLeftInterval);
					// 	}
					// }, 1000);
				} else if (this.status === ORDER_STATUS.PENDING || this.status === ORDER_STATUS.SEARCH) {
					this.timeLeft = 7 * 24 * 60 * 60;
					// this.timeLeftInterval = setInterval(() => {
					// 	if (this.timeLeft > 0) {
					// 		this.timeLeft--;
					// 	} else {
					// 		clearInterval(this.timeLeftInterval);
					// 	}
					// }, 1000);
				}
			},
			immediate: true,
		},
	},

	onunload() {
		clearInterval(this.timeLeftInterval);
	},

	methods: {
		copyCode() {
			uni.setClipboardData({
				data: this.code,
				success: function () {
					uni.showToast({
						title: "复制成功",
						icon: "none",
						duration: 2000,
					});
				},
			});
		},

		toAllBid() {
			uni.navigateTo({
				url: "/pages/market/orderDetail?page=2",
			});
		},

		toOrderDetail() {
			uni.navigateTo({
				url: "/pages/market/orderDetail?page=1&status=" + this.status + "&isOwner=" + this.isOwner,
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.order_item {
	width: 100%;
	height: max-content;
	padding: 20rpx 40rpx;
	border-radius: 20rpx;
	background-color: white;

	& + .order_item {
		margin-top: 20rpx;
	}

	.order_code {
		width: 100%;
		height: 74rpx;
		border-bottom: 4rpx dashed #eeeeee;

		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 74rpx;

		display: flex;
		justify-content: flex-start;
		align-items: center;

		.code {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.value {
				width: 35%;
				overflow: hidden; /* 隐藏超出部分 */
				white-space: nowrap; /* 不换行 */
				text-overflow: ellipsis; /* 省略号 */
				margin-right: 12rpx;
			}

			image {
				width: 32rpx;
			}
		}

		.status {
			margin-left: auto;
			color: black;
			font-weight: bold;

			&.status2,
			&.status8 {
				color: #999999;
			}

			&.status5,
			&.status6,
			&.status7,
			&.status9,
			&.status10 {
				color: #2359f8;
			}
		}
	}

	.order_nft {
		width: 100%;

		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;

		image {
			width: 100rpx;
			border-radius: 10rpx;
		}

		.order_info {
			width: calc(100% - 100rpx);
			height: 100rpx;
			margin-left: 22rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-direction: column;

			.name_price {
				width: 100%;

				display: flex;
				justify-content: space-between;
				align-items: center;

				font-weight: 500;
				font-size: 32rpx;
				color: black;
			}

			.time {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;

				.highest {
					color: #2359f8;
				}
			}
		}
	}

	.bid,
	.locked,
	.sell,
	.search {
		width: 100%;
		height: 52rpx;
		font-weight: 500;
		font-size: 24rpx;
		line-height: 52rpx;
		color: #2359f8;
		margin-top: 22rpx;

		display: flex;
		justify-content: flex-start;
		align-items: center;

		.opera {
			width: 120rpx;
			height: 100%;
			border: 1px solid #2359f8;
			text-align: center;
			border-radius: 10rpx;
			background-color: #2359f8;
			color: white;

			& + .opera {
				margin-left: 12rpx;
			}

			&.single {
				margin-left: auto;
			}

			&.all_bid {
				background-color: white;
				color: #2359f8;
				margin-left: auto;
			}

			&.cancel {
				background-color: #eeeeee;
				border-color: #eeeeee;
				color: #999999;
				margin-left: auto;
			}
		}
	}
}
</style>
